<template>
  <el-dialog
    title="集中存储"
    :visible.sync="dialogFormVisible"
    width="50%"
    @close="back"
  >
    <div>
      <el-steps :space="200" :active="active" align-center>
        <el-step title="呼叫AMR"></el-step>
        <el-step title="确认装载"></el-step>
        <el-step title="确认卸载"></el-step>
        <el-step title="残样上架"></el-step>
      </el-steps>
    </div>
    <div v-if="active == 0" class="step1">
      <div>
        点击下方按钮呼叫AMR到
        <span class="area">{{ item.areaName }} </span>搬运残样
      </div>
      <el-button type="primary" @click="notice" :loading="loading"
        >呼叫线缆AMR</el-button
      >
    </div>
    <div
      v-if="active == 1"
      v-loading="!robotId"
      style="height: 300px"
      element-loading-text="正在呼叫小车中"
    >
      <el-result icon="success" v-if="robotId"> </el-result>
      <div class="step2" v-if="robotId">
        <div style="color: #64c43c; font-size: 24px">已成功呼叫AMR</div>
        <div style="margin: 20px 0px">
          请将残样放置
          <span style="color: #dc041c; font-size: 18px">{{ robotId }}</span>
          号小车上,点击确认
        </div>
        <el-button
          type="primary"
          :loading="!robotId && loading"
          @click="handleConfirmLoad(1)"
          >确认装载</el-button
        >
      </div>
    </div>
    <div v-if="active == 2" class="step3">
      <div>请等待AMR搬运完成</div>
      <div style="margin: 10px 0px 30px 0px">
        将残样从
        <span style="color: #dc041c; font-size: 18px">{{ robotId }}</span>
        号AMR取下,点击确认
      </div>
      <el-button type="primary" :loading="loading" @click="handleConfirmLoad(2)"
        >确认卸载</el-button
      >
    </div>
    <div v-if="active == 3" class="step4">
      <div>输入残样存放的货位编码完成上架</div>
      <el-input
        v-model="cellMark"
        placeholder="请输入货位编码"
        style="margin: 20px 0px 30px 0px; width: 50%"
      ></el-input>
      <el-button type="primary" @click="putOnCell">残样上架</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fromRack, getAmrTask, artificialAMR, putOnCell } from "@/common/api";
export default {
  name: "R-Dialog",
  props: {},
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      active: 0,
      loading: false,
      item: {},
      amrMissionId: "", //任务编号
      robotId: 0, //小车编号
      timer: null,
      targetCodeList: [],
      cellMark: "", //货位编码
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    notice() {
      this.active = 1;
      this.loading = true;
      fromRack({
        samNumber: this.item.samNumber,
        boxMark: this.item.boxMark,
      })
        .then((res) => {
          this.loading = false;
          if (res.success) {
            // this.active = 1;
            this.amrMissionId = res.data.amrMissionId;
            this.targetCodeList = res.data.targetCodeList;
            this.getRobot(); //根据任务编号轮询查小车
            this.close();
            this.timer = setInterval(() => {
              this.getRobot();
            }, 3000);
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getRobot() {
      getAmrTask({
        id: this.amrMissionId,
      }).then((res) => {
        if (res.success) {
          const json = JSON.parse(res.data);
          this.robotId = json.robot_id;
          if (this.robotId) {
            this.close();
          }
        }
      });
    },
    handleConfirmLoad(e) {
      //1-装载 2-卸载
      this.loading = true;
      artificialAMR({
        missionId: this.amrMissionId,
        targetCode: e == 1 ? this.targetCodeList[0] : this.targetCodeList[1],
      })
        .then((res) => {
          this.loading = false;
          if (res.success) {
            if (e == 1) {
              this.$successMsg("样品装载完成");
              this.active = 2;
            }
            if (e == 2) {
              this.$successMsg("样品卸载完成");
              this.active = 3;
            }
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    putOnCell() {
      let param = {
        cellMark: this.cellMark,
        samNumber: this.item.samNumber,
        userName: "",
      };
      this.loading = true;
      putOnCell(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.$successMsg(res.message);
            this.$emit("getTable");
            this.close();
            this.dialogFormVisible = false;
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    close() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    back() {
      this.close();
    },
  },
};
</script>


<style lang="scss" scoped>
.step1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}
.area {
  color: #0d6eb3;
}
.step2 {
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
.step4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
</style>
